<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangzhanhua
 * @Date: 2020-12-07 14:15:05
 * @LastEditors: zhangzhanhua
 * @LastEditTime: 2021-02-05 13:30:12
-->
<template>
  <div class="updataCard">
    <div class="updataBox" id="xad" @mouseenter='cleanTimer' @mouseleave='addTimer'>
      <!-- <div class="updataBox" id="xad"> -->
      <div class="topImg">
        <img src="../../../assets/img/topTip1.png" alt="" width="380px">
      </div>
      <div class="downData">
        <div class="version">当前版本更新内容:</div>
        <div class="versionList">
          <ul class="scrollUl">
            <li v-for="(item,index) in upDataList" :key="index">
             {{index+1}}.{{item}}
            </li>
           
          </ul>
        </div>
        <div class="btn">
          <el-button type="primary" round style="  width: 226px;
      height: 45px;" @click="iscardShow">知道了</el-button>
        </div>
      </div>
      <div class="close" @click="iscardShow"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "updataCard",
  props: {
    close: {
      type: Function,
    },
    upDataList:{
      type:Array,
      default:()=>{
        return [
          '1.页面中判断某个session值是否存在。如果不存在，使用js修，因此并非iframe去访问，且能以第一',
          '1.页面中判断某个session值是否存在。如果不存在，使用js修，因此并非iframe去访问，且能以第一'
        ]
      }
    },
    //当前版本
    currentVersion:{
      type:String,
      default:'web版'
    }
  },
  mounted() {
    // let xad = document.getElementById('xad')
    setTimeout(() => {
      // xad.style.display = 'none'
      // this.reforward = true
    }, 5000);
    this.addTimer()
  },
  data() {
    return {
      cardShow: true,
      reforward: false,
      closeShow: true,
      timer:''
    };
  },
  methods: {
    //移除定时器
    cleanTimer(){
     clearTimeout(this.timer)
    },
    //增加定时器
    addTimer(){
      this.timer = setTimeout(()=>{
        this.close('auto')
      },5000)
    },
    iscardShow() {
      this.close();
    },
  },
  destroyed(){
    this.cleanTimer()
  }
};
</script>

<style lang="less" scope>
.updataCard {
}
.scrollUl {
  list-style: none;
  li {
    // letter-spacing: 2px;
    font-size: 16px;
    padding-bottom: 8px;
  }
}
// @import './404.less';
.updataBox {
  // background: url("../../../assets/img/updatatip.png");

  position: relative;
  width: 380px;
  // height: 682px;
  background-repeat: no-repeat;
  // background: #ffffff;
  // animation: one 1s linear forwards;
  // transition: all 1s linear;
  background-size: contain;
  .topImg {
    width: 100%;
    // height: 195px;
    
    // background: #eaeaea;
  }
  .downData {
    background: #fff;
    transform: translateY(-10px);
    padding-bottom: 20px;
    border-radius: 0 0 10px 10px;

    .version {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: black;
      margin: 5px 0 22px 0;
      letter-spacing: 1px;
    }
    .btn{
    
      text-align: center;
    }
    .versionList{
      padding: 0 40px;
       .scrollUl {
        // overflow-y: scroll;
        min-height: 100px;
        margin-bottom: 5px;
      }
      .scrollUl::-webkit-scrollbar {
        display: none;
      }
    }
  }

  .close {
    background: url("../../../assets/img/updataclose.png");
    position: absolute;
    top: 13px;
    right: -13px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3333;
    background-size: cover;
  }
}
.downDataBox {
  animation: forward 1s linear forwards;
}
@keyframes one {
  0% {
    height: 0;
  }
  20% {
    height: 20px;
  }
  40% {
    height: 40px;
  }
  60% {
    height: 80px;
  }
  80% {
    height: 160px;
  }
  100% {
    height: 300px;
  }
}
@keyframes forward {
  0% {
    height: 300px;
  }
  20% {
    height: 160px;
  }
  40% {
    height: 80px;
  }
  60% {
    height: 40px;
  }
  80% {
    height: 20px;
  }
  100% {
    height: 0;
  }
}
</style>